<template>
  <div class="container">
    <el-form :model="selectRegionalForm" label-width="120px" align="left" @keyup.enter.native="search">
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('m.page.region')+$t('m.name')">
            <el-input maxlength="20" show-word-limit v-model.trim="selectRegionalForm.areaname" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          <el-button type="primary" v-if="hasPermission('add')" @click="$router.push({ path: 'regional/addregion'})">{{$t('m.add')}}</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-row>
      <el-col :span="24">
        <el-table ref="table" stripe empty-text class="table-wrap single-select-table" :data="tableData" :row-style="tableRowStyle" :row-class-name="tableRowClassName" @row-click="rowClick" @selection-change="handleSingleSelectionChange" v-loading="tableLoading">
          <el-table-column align="center" prop="areacode" :label="$t('m.page.region')+$t('m.code')"></el-table-column>
          <el-table-column align="center" prop="areaname" :label="$t('m.page.region')+$t('m.name')"></el-table-column>
          <el-table-column align="center" prop="partitionname" :label="$t('m.partitionname')"></el-table-column>
          <el-table-column align="center" :label="$t('m.page.region')+$t('m.charge')">
            <template slot-scope="scope">
              <span style="margin:5px;display:inline-block" v-for="(item,index) in scope.row.userList" :key="index">{{item.username}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="locationnumber" :label="$t('m.region.locationnumber')"></el-table-column>
          <el-table-column align="center" prop="creator" :label="$t('m.creator')"></el-table-column>
          <el-table-column width align="center" prop="createdate" :label="$t('m.createdate')"></el-table-column>
          <el-table-column width="100" align="center" :label="$t('m.operation')">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                v-if="hasPermission('table-edit')"
                @click.stop="$router.push({path: 'regional/addregion', query: {regionid:scope.row.partitionid,partitionname:scope.row.partitionname,id:scope.row.warehouseid}})"
              >{{$t('m.edit')}}</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChangeInitFn" @size-change="handleSizeChangeInitFn"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import common from '../../utils/common'

export default {
  name:'regional',
  data(){
    return {
      selectRegionalForm:{
        areaname:'' //区域名称
      },
      tableData:[],

      rowData:{},
      warehouseList:[],
      warehouseAreaList:[],
      outerVisible:false,
      innerVisible:false,

      increaseOuderForm:{
        wareHourseName:'',
        wareHourseId:'',
        wareHourseAreaName:'',
        wareHourseAreaId:'',

        subLocation:[]
      },

      optionalLocationList:[],
      checkBoxGroupIncrease:[],

      checkBoxInlineRowNub:6, //每行展示的checkBox 数
      checkBoxInlineLinNub:'',
      checkBoxData:[],
      checkBoxDataT:[],
      disableValue:true,
      saveDisableValue:true,
      index:'', //点击的是哪一行checkbox
      submitFlag:false, //判断是否都填写了库位名称
      outerEditVisible:false,
      partitionid:'',
      warehouseid:null,
      editForm:{
        name1:'',
        name1Id:'',
        name2:'',
        name2Id:'',
        partitionid:''
      },
      editData:[],
      saveEDisableValue:true,
      disableEValue:true,
      // checkBoxEditArr:[]
      optionEditcheckBoxArr:[],
      editIndex:'',
      checkAllDataArr:[],
      pickerArr:[],
      currentRowforSelectData:'',
      currentRowforIncreaseSelectData:'',
      locationList:[],
      set:[],
      arr:[],
      multipleSelection:[]
    }
  },
  methods:{
    init(){
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/warehousearea/page',
        params:{
          areaname:this.selectRegionalForm.areaname,
          page:this.page,
          rows:this.rowSize
        }
      }).then(({ data }) => {
        this.tableData = data.records
        setTimeout(()=>this.tableLoading=false,500)
        this.tableData.forEach(function (item){
          item.createdate = common.timestampToTime(item.createdate)
          item.modifydate = common.timestampToTime(item.modifydate)
        })

        this.totalRows = data.total
      })
    },
    search(){
      this.page = 1
      this.init()
    },
    getwarehouse(){
      let that = this
      this.$axios({
        method:'get',
        url:'/warehouse/list'
      }).then(({ data }) => {
        that.warehouseList = data
        that.page = 1
        that.init()
      })
    }
  },
  activated(){
    this.getwarehouse()
  }
}
</script>

<style  lang=scss scoped>
</style>

